<template>
    <div>
        <BaseTitle title='商品分类'/>
        <div class="content" >
           <div class="left" ref="left">
                <ul>
                    <li v-for='(val,index) in category' :key='val.mallCategoryId'  :class="{active:leftTabIndex==index}" @click="categoryClick(val,index)">
                        {{val.mallCategoryName}}
                    </li>
                </ul>
            </div>
            <div class="right" ref='right'>
                <div class="empty">
                        <van-tabs v-model="active" @click="onClick" >
                                <Scroll  v-show="!showFlag" :data='dataList' class="scroll" ref="scroll" :bounce='bounce' >
                                    <div>
                                        <van-tab v-for="val in list || category[0].data" :title="val.mallSubName" :key="val.mallSubId">
                                            <GoodsList :list='dataList' @datails='datails'/>
                                        </van-tab>
                                    </div>
                                </Scroll>
                            </van-tabs>
                        <div class="null" v-show="!dataList.length && !showFlag">
                            暂无数据~~
                        </div>
                </div>
            </div>
        </div>
        <BaseLoding :showFlag='showFlag'/>
        <router-view />
    </div>
</template>
<script>
import {mapGetters,mapMutations,mapActions} from 'vuex'
import Scroll from 'components/Scroll'
import GoodsList from 'components/GoodsList'
import BaseTitle from 'components/BaseTitle'
import {loading} from 'js/mixin'
export default {
    mixins: [loading],
    computed: {
        ...mapGetters(['category'])
    },

    data() {
        return {
            leftTabIndex: 0,
            list: '',
            active: 0,
            dataList: [],

            bounce: {
                top:false,
            },
            isLoading: false,
            defaultId : '2c9f6c946016ea9b016016f79c8e0000'
        }
    },

    components: {
        Scroll,
        BaseTitle,
        GoodsList,
    },

    methods: {
        categoryClick(val,i) {
            this.active = 0
            console.log(val);
            this.list = val.data
            if (this.leftTabIndex == i) return
            this.leftTabIndex = i
            this.getList(val.data[0].mallSubId)
            this.$refs.scroll.scrollTo(0,0,300)
        },

        onClick(index) {
            this.dataList = []
            const mallSubId = this.category[this.leftTabIndex].data[index].mallSubId
            this.getList(mallSubId)
        },

        change(index) {
            this.onClick(index)
        },

        getList(id) {
            this.showFlag = true
            this.$http.get(`/api/goods/classification?mallSubId=${id}`).then(res => {
                if (res.data.code == 200) {
                    this.showFlag = false
                    this.dataList =  res.data.dataList
                }
            })
        },

        datails(val) {
            this.setBrowse(val)     // 加入最近浏览
            this.setGoodDetails(val)
            this.$router.push({path:`/category/${val.id}`})
        },

        ...mapMutations({
            setGoodDetails: 'goodsDetail'
        }),

        ...mapActions(['setBrowse'])
    },

    created() {
        this.getList(this.defaultId)
        console.log(this.category);
    },
}
</script>

<style scoped lang="less">
  .content {
      display: flex;
      position: fixed;
      top: 40px;
      left: 0;
      right: 0;
      bottom: 0;
      background: #f5f5f5;
      .left {
          flex: 0 0 80px;
          background: #f5f5f5;
          padding-bottom: 55px;
          height: 100%;
          overflow: hidden;
          ul {
              height: 100%;
              overflow: hidden;
          }
          .active {
              background: #fff;
          }
          li {
              color: #666;
              height: 43px;
              line-height: 43px;
              font-size: 14px;
              text-align: center;
              border-bottom: 1px solid #EFEFEF;
          }
      }
      .right {
          flex: 1;
          .empty {
              text-align: center;
              font-size: 15px;
              .null {
                  padding-top: 30px;
                  box-sizing: border-box;
                  color: #bbb;
              }
              .scroll {
                  height: 100%;
                  overflow: hidden;
              }
          }
      }
  }
</style>
